<template>
	<div class="app-content">
		<SeachNav @search="searchValue" :showFilter="false"></SeachNav>
		<div class="list" v-if="!list.loading">
			<template v-if="!$util.isEmpty(list.data)">
				<div class="staff-list_box">
					<radio-group @change="checkItem">
						<div class="staff-list" v-for="(item,index) in list.data" :key="index">
							<radio :checked="item.check" color="#ffd11a" :value="item.user_id+''" />
							<img :src="item.user_picture" alt />
							<div class="staff-list_right">
								<h3>{{item.name}}</h3>
								<div>职位：{{item.job}}</div>
								<div>部门：{{item.department_name || '暂无'}}</div>
								<div>电话：{{item.mobile_phone || '暂无'}}</div>
							</div>
							<div class="staff-status">
								<img v-if="item.status===1" class="staff-status" :src="imgUrl+'publicicon/icon_memconcle.png'" alt />
								<img v-if="item.status===2" class="staff-status" :src="imgUrl+'publicicon/icon_memconfirm.png'" alt />
								<img v-if="item.status===3" class="staff-status" :src="imgUrl+'publicicon/icon_memquit.png'" alt />
								<img v-if="item.status===4" class="staff-status" :src="imgUrl+'publicicon/icon_dimission.png'" alt />
							</div>
						</div>
					</radio-group>
				</div>
			</template>

			<app-wrapper-empty v-else title="暂无员工" :is-empty="$util.isEmpty(list.data)">
				<template slot="footer">
					<div class="jumpBtn" @click="addStaffPage">{{decodeURIComponent(option.tips)}}</div>
				</template>
			</app-wrapper-empty>

			<div class="footer_btn" v-if="!$util.isEmpty(list.data)">
				<div class="affirm" @click="affirmBtn">将客户转移给该员工</div>
			</div>
		</div>
	</div>
</template>

<script>
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import { list } from '@/mixins'
import { transferStaffList, transferMenber } from '@/api/staffManage/index'
import StaffList from './components/staffList'
import SeachNav from '@/pages/components/SeachNav'

export default {
	name: 'SelectStaff', // 员工选择
	mixins: [list],
	components: {
		AppWrapperEmpty,
		StaffList,
		SeachNav
	},
	data() {
		return {
			showList: false,
			option: {},
			imgUrl: this.$constant.imgUrl,
			selArr: '',
			from_user_id: '', // 交接人的id
			form: {
				sValue: ''
			}
		}
	},
	onLoad(option) {
		// console.log(option, '选择员工 option')
		this.option = option
		this.from_user_id = this.option.user_id
		this.init()
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.init()
	},
	methods: {
		init() {
			// manage 员工管理页  team 推给团队
			const params = {
				page: this.list.page,
				limit: 6,
				...this.form
			}
			return transferStaffList(params).then(res => {
				this.completes(res)
			})
		},
		searchValue(val) {
			this.form.sValue = val
			this.resetList()
			this.init()
		},
		checkItem(e) {
			console.log(e)
			this.selArr = e.detail.value
		},
		affirmBtn() {
			if (this.$util.isEmpty(this.selArr)) {
				uni.showToast({
					title: '请选择员工',
					icon: 'none'
				})
				return
			}
			let params = {
				from_user_id: this.from_user_id,
				to_user_id: this.selArr
			}
			transferMenber(params).then(res => {
				uni.showToast(res.data)
				uni.navigateBack()
			})
		},
		// updateCheck(checkInfo) {
		// 	this.list.data[checkInfo.index].check = checkInfo.check
		// },
		// 新增员工
		addStaffPage() {
			uni.navigateTo({
				url: `/pages/admin/staffManage/staffManage`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.list {
		padding-bottom: 100px;
	}
	.van-popup.van-popup--bottom {
		background-color: #dddddd;
	}
	.jumpBtn {
		margin: 0 auto;
		display: block;
		color: #391b06;
		font-size: 28px;
		margin-top: 30px;
		border-radius: 30px;
		text-align: center;
		background: #ffd11a;
		width: 180px;
		height: 60px;
		line-height: 60px;
	}
	.staff-list_box {
		padding: 10px 30px;
		.staff-list {
			padding: 30px 20px;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			box-shadow: 0px 1px 6px 0px rgba(221, 221, 221, 0.5);
			border-radius: 20px;
			margin-top: 20px;
			overflow: hidden;
			position: relative;
			& > img {
				width: 120px;
				height: 120px;
				border-radius: 50%;
				margin-left: 20px;
			}
			& .staff-list_right {
				flex: 1;
				padding-left: 20px;
				& > h3 {
					color: #333333;
					font-weight: 600;
					font-size: 34px;
					margin-bottom: 20px;
				}
				& > div {
					color: #666666;
					font-weight: 400;
					font-size: 24px;
					line-height: 30px;
				}
			}
			& .staff-status {
				position: absolute;
				right: 0;
				top: 0;
				width: 90px;
				height: 90px;
				& > img {
					width: 100%;
					height: 100%;
				}
			}
			// & .staff-status {
			//     width: 180px;
			//     background-color: #09BB07;
			//     color: #FFFFFF;
			//     line-height: 45px;
			//     font-size:22px;
			//     text-align: center;
			//     position: absolute;
			//     right:-50px;
			//     top: 16px;
			//     transform-origin: 50% 50%;
			//     transform: rotate(45deg);
			//     &.no_status {
			//         color: #3A1B04;
			//         background-color: #FFD11A;
			//     }
			// }
		}
	}
	.footer_btn {
		width: 100%;
		height: 100px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		display: flex;
		.left_btn {
			flex: 1;
			display: flex;
			align-items: center;
			padding-left: 30px;
			font-size: 30px;
			& .des {
				font-size: 24px;
				font-weight: 400;
				color: #999999;
			}
		}
		& .affirm {
			flex: 1;
			line-height: 98px;
			// width: 264px;
			background-color: #ffd11a;
			color: #3a1b04;
			font-weight: 400;
			text-align: center;
			font-size: 32px;
		}
	}
</style>
